<template>
	<view style="background-color: #fff;height: 100vh;">
		<view class="bgcolor">
			<!-- <view style="height: 100%;width: 100%;">
				<image style="height: 100%;width: 100%;" mode="aspectFill" :src="answer1"></image>
			</view> -->
			<view
				style="width: 100%;height: 1000rpx; position: absolute;padding: 30px;padding-bottom: 0;">
				<view class="radius text-white" style="height: 1000rpx;border-radius: 20rpx; display: flex;">	
					<!-- <view style="height: 1000rpx;width: 100%;">
						<image style="height: 1000rpx;width: 100%;" :src="answer3" mode="aspectFit"></image>
					</view> -->
					<view style="position: absolute;top:490rpx;width: 76%;margin: 30rpx;" v-if="!resultSucess && !resultError && !resultSum">
						<view style="height: 180rpx;">
							<view class="text-black" style="height: 50rpx;align-items: center;justify-content: center;
							             display: flex;font-size: 36rpx;margin-top: 20rpx;">
								{{progress}}
							</view>
							<view class="padding-sm text-black"
								style="height: 110rpx;font-size: 32rpx;font-weight: 600;">
								{{question.questionTitle || ''}}
							</view>
						</view>
						<view style="height: 400rpx;" class="text-black">
							<view>
								<radio-group @click="radioClick(item.selectId)" v-for="(item, index) in question.selects" :key="index">
									<view class="margin-lg">
										<radio class="green" :value="item.selectId"></radio>
										<text class="margin-left-sm" style="font-size: 32rpx;">{{item.sort}}、{{item.selectContent}}</text>
									</view>
									<!-- <view class="margin-lg">
										<radio class="green" value="2"></radio>
										<text class="margin-left-sm" style="font-size: 32rpx;">{{item.optionB}}</text>
									</view>
									<view class="margin-lg" v-if="item.optionC">
										<radio class="green" value="3"></radio>
										<text class="margin-left-sm" style="font-size: 32rpx;">{{item.optionC}}</text>
									</view>
									<view class="margin-lg" v-if="item.optionD">
										<radio class="green" value="4"></radio>
										<text class="margin-left-sm" style="font-size: 32rpx;">{{item.optionD}}</text>
									</view> -->
								</radio-group>
							</view>
						</view>
					</view>
					<view v-if="resultSucess" style="height: 400rpx;padding: 40rpx;position: absolute;top:490rpx;width: 76%;margin: 30rpx;"
						class="text-black">
						<view style="height: 100rpx;">
							<view class='cu-tag line'
								style="height: 100rpx;font-size: 86rpx;align-items: center;justify-content: center;display: flex;">
								<text class='cuIcon-roundcheckfill text-green' style="align-items: baseline;"></text>
							</view>
						</view>
						<view
							style="height: 80rpx;font-size:46rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;"
							class="text-green">
							恭喜您，答对了
						</view>
						<view
							style="height: 80rpx;font-size:32rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;">
							为你配捐公益爱心积分：
						</view>
						<view style="height: 80rpx;margin-left: 200rpx;font-size: 32rpx;">
							<view class='cu-tag line' style="height: 80rpx;font-size: 60rpx;border-radius: ;">
								<text class='cuIcon-likefill text-orange' style="align-items: baseline;"></text>
							</view>{{scoreValue}}
						</view>
						<view style="margin-top: 100rpx;display: flex;align-items: center;justify-content: center;">
							<button class="cu-btn round line-green shadow" @click="nextQuestion()">
								下一题
							</button>
						</view>
					</view>
					<view v-if="resultError" style="height: 400rpx;padding: 40rpx;position: absolute;top:490rpx;width: 76%;margin: 30rpx;"
						class="text-black">
						<view style="height: 100rpx;width: 100%;">
							<view class='cu-tag line'
								style="height: 100rpx;font-size: 86rpx;align-items: center;justify-content: center;display: flex;">
								<text class='cuIcon-roundclose text-orange' style="align-items: baseline;"></text>
							</view>
						</view>
						<view
							style="height: 80rpx;font-size:46rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;"
							class="text-orange">
							很遗憾，答错了
						</view>
						<view
							style="height: 80rpx;font-size:32rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;">
							为你配捐公益爱心积分：
						</view>
						<view style="height: 80rpx;margin-left: 200rpx;font-size: 32rpx;">
							<view class='cu-tag line' style="height: 80rpx;font-size: 60rpx;border-radius: ;">
								<text class='cuIcon-likefill text-orange' style="align-items: baseline;"></text>
							</view>{{scoreValue}}
						</view>
						<view style="margin-top: 100rpx;display: flex;align-items: center;justify-content: center;">
							<button class="cu-btn round line-orange shadow" @click="nextQuestion()">
								下一题
							</button>
						</view>
					</view>
					<view v-if="resultSum" style="height: 400rpx;padding: 0 40rpx;position: absolute;top:490rpx;width: 76%;margin: 30rpx;"
						class="text-black">
						<view style="height: 100rpx;">
							<view class='cu-tag line'
								style="height: 100rpx;font-size: 86rpx;align-items: center;justify-content: center;display: flex;">
								<text class='cuIcon-roundcheckfill text-green' style="align-items: baseline;"></text>
							</view>
						</view>
						<view
							style="height: 80rpx;font-size:46rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;"
							class="text-green">
							恭喜你
						</view>
						<view
							style="height: 80rpx;font-size:36rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;">
							<!-- 今天共获得{{scoreValueSum}}公益积分 -->
							{{scoreValueSum}}
						</view>
						<!-- <view style="font-size: 27rpx;">
							<view style="text-align: center;">小善大爱，点滴汇聚爱心，累计100积分可以为边远山区儿童奉献一份热腾腾的免费午餐</view>
						</view>
						<view style="font-size: 27rpx;">
							<view style="text-align: center;">5份免费午餐（周午餐）即可获得中国社会福利基金会联合颁发的国家级荣誉证书和社会公益实践证明</view>
						</view>
						<view style="font-size: 27rpx;">
							<view style="text-align: center;">（想要获得更多积分，为公益助力，可联系爱心志愿者）</view>
						</view> -->
					</view>
			
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getQuestionList,
		getQuestionDetail,
		addQuestionDetail
	} from '@/api/question.js'

	import {
		getUserProfile,
		updateScoreValue
	} from '@/utils/getUserProfile.js'

	export default {
		data() {
			return {
				answer1: 'http://source.zywm.expohub.cn/upload/image/2022/06-09/711f47e34af768c81020978e1a3fb9ea.png',
				answer2: 'https://nottomention.emake.cn/group1/M00/00/00/answer2.png',
				answer3: require('../../static/answer3.png'),
				dotStyle: true,
				questionList: [],
				nextQ: 0,
				selectOption: '',
				resultSucess: false, // 回答成功
				resultError: false, // 回答失败
				scoreValue: 0,
				questionIndex: 0,
				resultSum: false,
				questionDetailCnt: 0,
				scoreValueSum: 0,
				question: {}, // 题目
				progress: '', // 1/20
				nowNum: 1 // 当前题数
			}
		},
		async onTabItemTap(item) {			
			this.resultSucess = false;
			this.resultError = false;
			this.resultSum = false;
			this.scoreValueSum = 0;
			this.nextQ = 0;
			let token = uni.getStorageSync("token");
			if (!token) {
				let data = await getUserProfile();
				if (data.code != 200) {
					uni.showToast({
						title: '登录失败！',
						duration: 1000,
						icon: 'none',
					});
					return
				}
			}
			this.getQuestionDetail();
		},
		onLoad() {

		},
		mounted() {
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask: true
			// });
		},
		onReady() {
			uni.hideLoading()
		},
		onShareAppMessage() {
			return this.getShareData()
		},
		// 转发至朋友圈
		onShareTimeline() {
			return this.getShareData("timeline")
		},
		methods: {
			// 获取分享信息
			getShareData(type) {
				let title = "在消费中做公益，助力组织可持续发展";
				let path = "pages/billboard/index";
				let imageUrl = "../../static/share.png";
				if (type == "timeline") {
					return {
						title,
						imageUrl,
						query: path
					};
				}
				return {
					title,
					imageUrl,
					path
				};
			},
			/**授权登录*/
			async getUserProfile() {
				let data = await getUserProfile();
				if (data.code != 200) {
					uni.showToast({
						title: '登录失败！',
						duration: 1000,
						icon: 'none',
					});
					uni.navigateBack({
						delta: 1,
					})
				} else {
					uni.showToast({
						title: '登录成功！',
						duration: 1000,
						icon: 'none',
					});
				}
			},
			/**获取问题*/
			async getQuestionList(userId) {
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				getQuestionList({
					userId: userId
				}).then(res => {
					if (res.code == 200) {
						this.questionList = res.data;
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			radioChange(e) {
				this.selectOption = e.detail.value
			},
			/**点击事件*/
			async radioClick(id) {
				let token = uni.getStorageSync("token");
				if (!token) {
					let data = await getUserProfile();
					if (data.code != 200) {
						uni.showToast({
							title: '登录失败！',
							duration: 1000,
							icon: 'none',
						});
						return;
					}
				}
				// this.questionIndex = index;
				// if (item.answer == this.selectOption) {
				// 	this.resultSucess = true;
				// 	this.nextQ = 6;
				// 	this.scoreValue = item.scoreValue
				// } else {
				// 	this.resultError = true;
				// 	this.nextQ = 6;
				// 	this.scoreValue = 1;
				// }
				const query = {
					questionId: this.question.questionId,
					answer: id
				}
				addQuestionDetail(query).then(res => {
					console.log(res);
					if (res.code == 200) {
						if (res.data.isRight == 1) {
							this.resultSucess = true;
						} else {
							this.resultError = true;
						}
						this.scoreValue = res.data.credit
					} else {
						uni.showToast({
							title: '答题失败！',
							duration: 1000,
							icon: 'none',
						});
					}
				});

			},
			/**下一题*/
			nextQuestion() {
				this.resultSucess = false;
				this.resultError = false;
				this.getQuestionDetail()
			},
			/**获取问题明细*/
			async getQuestionDetail() {
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				getQuestionDetail({
				}).then(res => {
					if (res.code == 200) {
						const data = res.data
						this.question = data.question;
						this.progress = data.process
						const [nowNum] = data.process.split('/')
						this.nowNum = nowNum
						// this.questionDetailCnt = resultArray.length;
						// if (this.questionDetailCnt == 3) {
						// 	this.resultSum = true;
						// 	this.nextQ = 6;
						// 	resultArray.forEach((item) => {
						// 		this.scoreValueSum += item.scoreValue
						// 	});
						// } else {
						// 	this.getQuestionList(userId);
						// }
						uni.hideLoading();
					} else if (res.code == 500) {
						this.resultSum = true
						this.scoreValueSum = res.msg
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.answer2 {
		background: url("https://nottomention.emake.cn/group1/M00/00/00/answer2.png");
	}
	.bgcolor{
		display: flex;
		height: 100vh;
		background: url("http://source.zywm.expohub.cn/upload/image/2022/06-09/711f47e34af768c81020978e1a3fb9ea.png") no-repeat;
		background-size: cover;
	}
</style>
